CSS學習紀錄-04-class、id與複合選擇器(上)

css 學習筆記

joycechou_914 2024-05-14 16:39:52 ‧ 423 瀏覽

分享至

嗨嗨~我是914 今天要來學習class、id與複合選擇器囉GOGOGO

好想睡xD 禮拜一真容易效率很差(今天已禮拜二耶XD)
心還留在假日阿~
昨天還沒撰寫好~於是改到今天來發文:)
想問問大家會有因為心情而影響工作做事的效率嗎~

今天要來還債! 之前一直沒有說到的class跟id還有其他選擇器
那有其他的部分，會移到下篇來去做講解唷
class選擇器比較常用到的是tag、id、class、複合選擇器
來一併講解囉:")先從最常用到的class跟id

分別來看一下html跟css撰寫屬性的時候，可以怎麼去寫呢?
HTML
<標籤名稱屬性 C="值" 屬性 D="值">這是html</標籤名稱>

CSS
選擇器 {屬性 A: 值；屬性 B: 值}

元素（標籤）選擇（Type Selector）
h1 {
color: red;
}

類別選擇（Class Selector）

注意事項

class 方式可進行重複使用，任何指定同個 class 名稱的不同標籤都共用。
利用優先權效果，可以指定不同 class 錯開位置，得到不同外觀。
寫法會用 .逗點做為開頭。
類別名稱只允許使用英文、數字、連字-符號和底線_符號。
Class、id 的名稱有大小寫區分。
一個 Tag 可允許有多個 class 。


<style>
    /* css撰寫 */
    .a {
        color: rgb(94, 155, 41);  /* a標籤顏色 */
    }
    .b {
        color: rgb(73, 73, 167);/* b標籤顏色 */
    }
    .menu{
        color:rgb(251, 0, 255);/* menu顏色 */
    }
</style>
<body>
    /* html撰寫 */
    <!-- 相同元素但需要不同外觀時 -->
    <ul class="menu">
        <li>LOVE</li>
        <li class="a">LOVE</li>
    </ul>
    
    <!-- 重複使用b 這個標籤 -->
    <h1 class="b">Lorem</h1>
    <p><span class="b">Lorem</span> gogogogogogogogo</p>
</body>

ID 選擇 (ID Selector)

同 HTML 文件只能有一個 ID 名稱不重複
id 必須唯一可識別的，因為 (JS)常使用 id 作 DOM 對象，若相同 id 會讓 JS 只認同第一組 id 為目標。
寫法會用#逗點做為開頭。
避免使用 ID，盡可能使用 class

複合選擇器

後代選擇 X Y（Descendant Selector）
後代選擇器允許你選擇某個元素的後代元素，而不僅僅是子元素

使用了後代選擇器 div .special，這將選擇所有 class 為 "special" 的 <p> 元素，但是僅當它們是某個 <div> 元素的後代時。所以，第二個<p>元素的文字顏色被設置為藍色，而不是紅色。

<style>
    /* 將所有段落元素的文字顏色設置為紅色 */
    p {
        color: red;
    }
    /* 將 class 為 'special' 的段落元素的文字顏色設置為藍色 */
    div .special {
        color: blue;
    }
</style>
<body>
    <div>
        <p>This paragraph is red.</p>
        <div>
            <p>This paragraph is red too.</p>
            <p class="special">This paragraph is blue because it's a descendant of a div with class 'special'.</p>
        </div>
    </div>
</body>

子代選擇 X > Y（Child Selector）
允許你選擇某個元素的直接子元素，而不選擇所有後代元素

<style>
    /* 將所有div元素下的p元素背景色設置為淡綠色 */
    div > p {
        background-color: lightgreen;
    }
</style>
</head>
<body>
    下面這行是黑色的，因不在div下
    <p>This paragraph is light green because it's a direct child of the div.</p>
    <div>
        <p>This paragraph is not light green because it's not a direct child of the div.</p>
    </div>
</body>

相鄰選擇 X + Y（Adjacent Selector）
相鄰兄弟（單選）。它僅僅會選擇剛好在 X 元素之後的 Y 元素。

<style>
  h2 + p {
    color: red;
  }
</style>
<h2>Lorem, ipsum dolor.</h2>
<p>Lorem ipsum dolor sit amet.</p> <!--只有在h2下p的標籤是紅色-->
<p>Lorem ipsum dolor sit amet.</p>

相鄰群選擇 X ~ Y
相鄰兄弟群（多選）。它僅僅會選擇剛好在 X 元素之後的同層 Y 元素。

<style>
  /* h2 之後的同層 p 都會被選擇 */
  h2 ~ p {
    color: blue;
  }
</style>
<h1>Lorem, ipsum dolor.</h1>
<p>Lorem ipsum dolor sit amet.</p>

<h2>Lorem, ipsum dolor.</h2>
<p>Lorem ipsum dolor sit amet.</p><!--blue-->

<h3>Lorem ipsum dolor sit amet.</h3>
<p>Lorem ipsum dolor sit amet.</p><!--blue-->

<div>
  <p>Lorem ipsum dolor sit amet.</p>
</div>

屬性選擇 X[title]
從 tag 的屬性進行選擇，也能根據屬性值做條件上的滿足

X[Y] : X 持有屬性 Y 之對象
X[Y="Z"] :X 持有屬性 Y 之對象，且 Y 的值為 Z
X[Y^="Z"] :X 持有屬性 Y 之對象，且 Y 的值為 Z 開頭
X[Y$="Z"] :X 持有屬性 Y 之對象，且 Y 的值為 Z 結尾
X[Y*="Z"]:X 持有屬性 Y 之對象，且 Y 的值為包含 Z
X[Y~="Z"] :X 持有屬性 Y 之對象，且 Y 的值包含單詞 Z

舉例開始~因為擔心貼圖會造成太長的文章不易閱讀
所以我放了codepen的連結唷:)

1.選擇擁有特定屬性的元素 X[Y]

<div title="example">This is a div with a title.</div>
<span title="sample">This is a span with a title.</span>
/* 選擇所有擁有 title 屬性的元素 */
[title] {
  color: blue;
}

https://codepen.io/JoyceChou914/pen/oNRXLOr

2.選擇特定屬性值的元素 X[Y="Z"]

<input type="text" name="username">
<input type="password" name="password">
/* 選擇 type 屬性值為 text 的 input 元素 */
input[type="text"] {
  background-color: yellow;
}

https://codepen.io/JoyceChou914/pen/abrzPeN

3.選擇屬性值以特定字串開頭的元素 X[Y^="Z"]

<a href="https://example.com">Example</a>
<a href="http://example.org">Example</a>
/* 選擇 href 屬性值以 https 開頭的 a 元素 */
a[href^="https"] {
  font-weight: bold;
}

https://codepen.io/JoyceChou914/pen/ZENGONo

4.選擇屬性值以特定字串結尾的元素 X[Y$="Z"]

<img src="image.jpg" alt="An image">
<img src="picture.png" alt="A picture">
/* 選擇 src 屬性值以 .jpg 結尾的 img 元素 */
img[src$=".jpg"] {
  border: 2px solid red;
}

https://codepen.io/JoyceChou914/pen/gOJpMNr

5.選擇屬性值包含特定字串的元素 X[Y*="Z"]

<div class="container">
  <div class="item highlight">Item 1</div>
  <div class="item">Item 2</div>
</div>
/* 選擇 class 屬性值包含 highlight 的 div 元素 */
div[class*="highlight"] {
  background-color: lightgreen;
}

https://codepen.io/JoyceChou914/pen/dyEoXxb

6.選擇屬性值包含特定單詞的元素 X[Y~="Z"]

<p class="note important">This is an important note.</p>
<p class="note">This is a regular note.</p>
/* 選擇 class 屬性值包含單詞 important 的 p 元素 */
p[class~="important"] {
  font-size: 1.2em;
  color: red;
}

https://codepen.io/JoyceChou914/pen/bGydeXW

很謝謝每個指正文章的人唷:)
我是超級新手，若有任何建議或是錯誤的部分，歡迎底下留言唷thanks
我們下篇文章見掰掰~